var FogBox = new Class({
	initialize: function (eElm, options){
		if(!FogManager){
			throw new Error('FogBox need FogManager to work');
			return false;
		}
		eElm = $(eElm);
		this.opts = options;
		this.elm = eElm;
		this.cardinals = eElm.getCoordinates();
		var self = this;
		this.w = {
			height: document.body.scrollHeight,
			width: document.body.scrollWidth
		}
		Notifier.register(this, "onLayoutChanged", function(args){
			this.repositionate();
		});
		this.fogs = [];
		for(var i=0;i<4;i++){
			var styles = {};
			switch(i){
				case 0:
					styles = this.getStyles("top");
					this.fogs.push(new FogManager(null, {name:"top", styles:styles}));
					break;
				case 1:
					styles = this.getStyles("left");
					this.fogs.push(new FogManager(null, {name:"left", styles:styles}));
					break;
				case 2:
					styles = this.getStyles("right");
					this.fogs.push(new FogManager(null, {name:"right", styles:styles}));
					break;
				case 3:
					styles = this.getStyles("bottom");
					this.fogs.push(new FogManager(null, {name:"bottom", styles:styles}));
					break;
			}
			this.fogs[i].elm.addEvent("click", function(){
				this.closeAll();
			}.bind(this));
			
		}
		
	},
	
	getStyles: function (name){
		switch(name){
			case "top":
				return {top:0, left:0, width:"100%", height:this.cardinals.top};
			case "left":
				return {top:this.cardinals.top, left:0, width:this.cardinals.left, height:this.w.height - this.cardinals.top};
			case "right":
				return {top:this.cardinals.top, left:this.cardinals.right, width:this.w.width - this.cardinals.right, height:this.w.height - this.cardinals.top};
			case "bottom":
				return {top:this.cardinals.bottom, left:this.cardinals.left, width:this.cardinals.width, height:this.w.height - this.cardinals.top};
		}
	},
	
	closeAll: function (){
		this.fogs.each(function(fog){
			fog.close()
		});
		Object.reset(this);
	},
	
	repositionate: function (){
		// debug absence Notifier.unregister
		if(!this.elm) return;
		this.cardinals = this.elm.getCoordinates();
		this.w = {
			height: document.body.scrollHeight,
			width: document.body.scrollWidth
		}
		for(var i=0;i<4;i++){
			this.fogs[i].elm.setStyles(this.getStyles(this.fogs[i].options.name));
		}
	}

});